<template>
<view>
<view class="step_wrapper">
    <view class="step_sec">
        <view class="input_sec flex">
            <view>账 号</view>
            <input @input="inputIdcard" maxlength="18" placeholder="请输入您的证件号码" type="text">
        </view>
    </view>
    <view class="tips">如果通过证件号无法找回密码，请登录人人志愿App通过其他方式进行找回。</view>
    <view @tap="toSecond" class="btn theme_btn">下一步</view>
    <view @tap="makePhoneCall" class="call">客服热线：400-0035-125</view>
</view>
<view class="step_wrapper step2" :style="'left: ' + offset1 + '%;'">
    <view class="step_sec">
        <view class="txt_sec">您的证件号当前绑定手机号为：<text>{{mobile}}</text>
        </view>
        <view class="input_sec flex">
            <view>短信验证</view>
            <input @input="inputSms" class="mini_input" maxlength="10" placeholder="请输入短信验证码" type="number">
            <view @tap="sendSms" :class="'sms_btn' + (disabled?' disabled_btn':'')" maxlength="4">{{smsText}}</view>
        </view>
    </view>
    <view class="tips">如果通过证件号无法找回密码，请登录人人志愿App通过其他方式进行找回。</view>
    <view @tap="toThird" class="btn theme_btn">下一步</view>
    <view @tap="makePhoneCall" class="call">客服热线：400-0035-125</view>
</view>
<view class="step_wrapper step2" :style="'left: ' + offset2 + '%;'">
    <view class="step_sec">
        <view class="input_sec flex">
            <view>设置密码</view>
            <input @input="inputPwd" maxlength="18" placeholder="请设置8-18位密码，不可为纯数字" type="password">
        </view>
        <view class="input_sec flex">
            <view>再次输入</view>
            <input @input="inputPwdAgain" maxlength="18" placeholder="请再次输入密码" type="password">
        </view>
    </view>
    <view class="tips">如果通过证件号无法找回密码，请登录人人志愿App通过其他方式进行找回。</view>
    <view @tap="submitEvent" class="btn theme_btn">提交</view>
    <view @tap="makePhoneCall" class="call">客服热线：400-0035-125</view>
</view>
</view>
</template>

<script>
	import {sendCode, validateCode} from '../../api/smsManage.js'
  var t = require("../../utils/request.js"),
    a = require("../../utils/util.js"),
		config = require("../../utils/config.js").config,
    e = function (t) {
  return t && t.__esModule ? t : {
    default: t
  };
}(require("../../utils/api.js")),
    s = (getApp(), null),
    getUserByIdCard = e.default.getUserByIdCard,
    i = e.default.mobileSend,
    d = e.default.mobileCode,
    c = e.default.forgetPws,
    u = /^[0-9]*$/,
    r = /^(?=.*\d)(?=.*[a-zA-Z]).{8,18}$/;

export default {
  data() {
    return {
			userId: 0,
      idcard: "",
      mobile: "",
      offset1: "100",
      offset2: "100",
      sms: "",
      password: "",
      password2: "",
      count: 60,
      disabled: !1,
      smsText: "获取验证码"
    };
  },

  components: {},
  props: {},
  onLoad: function (t) {
  },
  onReady: function () {},
  onShow: function () {},
  onHide: function () {},
  onUnload: function () {},
  onPullDownRefresh: function () {},
  onReachBottom: function () {},
  onShareAppMessage: function () {
    return {
      title: "让公益更生活 让生活更公益",
      path: "/pages/index/index",
      imageUrl: "/static/images/zyh_logo.jpg"
    };
  },
  methods: {
    inputIdcard: function (t) {
      this.setData({
        idcard: t.detail.value
      });
    },
    inputSms: function (t) {
      this.setData({
        sms: t.detail.value
      });
    },
    inputPwd: function (t) {
      this.setData({
        password: t.detail.value
      });
    },
    inputPwdAgain: function (t) {
      this.setData({
        password2: t.detail.value
      });
    },
    makePhoneCall: function () {
      uni.makePhoneCall({
        phoneNumber: "4000035125"
      });
    },
    toSecond: function () {
      var t = this;
      this.idcard ? this.zyzIdRequest().then(function (e) {
        e.data.success ? t.setData({
          mobile: e.data.data.mobile,
					userId: e.data.data.id,
          offset1: "0"
        }) : uni.showToast({
          title: e.data.message,
          icon: "none"
        });
      }) : uni.showToast({
        title: "请输入您的证件号码",
        icon: "none"
      });
    },
    toThird: function () {
      var t = this;
			var params = {
				phone: this.mobile,
				code: this.sms
			};
			validateCode(params).then(result => {
				if (result.success) {
					t.setData({
					  offset2: "0"
					});
				} else {
					uni.showToast({
					  title: result.message,
					  icon: "none"
					})
				}
			});
			
    },
    submitEvent: function () {
      r.test(this.password) ? r.test(this.password2) ? this.password === this.password2 ? this.forgetPwsRequest().then(function (t) {
        t.data.success ? uni.showToast({
          title: "密码设置成功",
          icon: "none",
          success: function () {
            uni.redirectTo({
              url: "/pages/entry/login"
            });
          }
        }) : uni.showToast({
          title: t.data.message,
          icon: "none"
        });
      }) : uni.showToast({
        title: "前后输入的密码不一致，请重新输入",
        icon: "none"
      }) : uni.showToast({
        title: "请再次输入合规的密码",
        icon: "none"
      }) : uni.showToast({
        title: "请设置合规的密码",
        icon: "none"
      });
    },
    sendSms: function () {
      var t = this;
			var params = {
				'phone': this.mobile
			};
			sendCode(params).then(result => {
				if (result.success) {
					uni.showToast({
					  title: result.message,
					  icon: "none",
					  success: function () {
					    t.timeCount();
					  }
					})
				} else {
					uni.showToast({
					  title: result.message,
					  icon: "none"
					})
				}
			});
    },
    timeCount: function () {
      var t = this,
          a = this.count;
      60 === a && (s = setInterval(function () {
        a > 0 ? (a--, t.setData({
          count: a,
          smsText: a + "s",
          disabled: !0
        })) : (a = 60, t.setData({
          count: a,
          smsText: "重新获取",
          disabled: !1
        }), clearInterval(s));
      }, 1e3));
    },
    zyzIdRequest: function () {
      var a = {
        data: {
					api: getUserByIdCard,
          idNo: this.idcard
        },
				method: 'get'
      };

      return (0, t.request)(a, "normal", !0);
    },
    forgetPwsRequest: function () {
      var a = {
        data: {
          id: this.userId,
          password: this.password,
					code: this.sms,
					api: c,
        }
      };
      return (0, t.request)(a, "normal", !0);
    }
  }
};
</script>
<style>
page {
    position: relative;
}

.step_wrapper,page {
    width: 100%;
    height: 100%;
    background: #f4f4f4;
}

.step_wrapper.step2 {
    z-index: 9;
}

.step_wrapper.step2,.step_wrapper.step3 {
    position: absolute;
    top: 0;
    left: 100%;
    transition: left .33s ease;
}

.step_wrapper.step3 {
    z-index: 10;
}

.step_sec {
    background: #fff;
}

.btn {
    width: 690rpx;
    height: 88rpx;
    text-align: center;
    line-height: 88rpx;
    border-radius: 44rpx;
    font-size: 30rpx;
    margin: 60rpx auto 40rpx;
}

.input_sec .captcha {
    position: absolute;
    top: 50%;
    right: 30rpx;
    z-index: 11;
    transform: translateY(-50%);
    width: 188rpx;
    height: 80rpx;
    border: 1rpx solid #e1e2e3;
}

.input_sec input.mini_input {
    flex: 0 0 300rpx;
    width: 300rpx;
}

.input_sec .sms_btn {
    position: absolute;
    top: 50%;
    right: 30rpx;
    transform: translateY(-50%);
    z-index: 11;
    width: 164rpx;
    height: 56rpx;
    line-height: 56rpx;
    background: #24cba9;
    text-align: center;
    font-size: 26rpx;
    color: #fff;
    text-align-last: center;
}

.tips {
    margin: 20rpx 0 60rpx;
    line-height: 36rpx;
    font-size: 24rpx;
    color: #333;
}

.tips,.txt_sec {
    padding: 0 30rpx;
}

.txt_sec {
    width: 100%;
    height: 98rpx;
    line-height: 98rpx;
    font-size: 30rpx;
    color: #999;
}

.txt_sec text {
    color: #f5a623;
}
</style>